<template>
  <div class="patient">
    <!-- 条件 -->
    <el-card id="top_card" class="top_nav" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left">
          <el-form label-width="140px" :inline="true" :size="optionButtonSize">
            <el-form-item>
              <el-input v-model="form.name" clearable :placeholder="$t('patient.huanzhe55')" style="width: 300px"
                @keyup.enter.native="getPatientList" />
            </el-form-item>

            <el-form-item>
              <el-input v-model="form.contactWay" clearable :placeholder="$t('patient.huanzhe56')" style="width: 300px"
                @keyup.enter.native="getPatientList" />
            </el-form-item>

            <el-form-item :label="$t('patient.huanzhe2')">
              <el-date-picker v-model="dateTime" :picker-options="pickerOptions" type="daterange" range-separator="~"
                value-format="yyyy-MM-dd" :start-placeholder="$t('caseorder.anli4')"
                :end-placeholder="$t('caseorder.anli5')" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :size="optionButtonSize" @click="getPatientList">
                {{ $t('patient.huanzhe4') }}
              </el-button>
              <el-button plain :size="optionButtonSize" @click="resetClick">
                {{ $t('patient.huanzhe5') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="top_nav_right">
          <el-button :size="optionButtonSize" type="primary" icon="el-icon-plus" @click="addPatientHandle">
            {{ $t('patient.huanzhe6') }}
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card id="content_card" class="equipmet_inner" :shadow="shadowShow">
      <el-table :data="tableData" style="width: 100%" size="mini" height="600" :header-cell-style="headercellstyle">
        <el-table-column align="center" prop="name" :label="$t('patient.huanzhe7')" show-overflow-tooltip />
        <el-table-column align="center" prop="contactWay" :label="$t('patient.huanzhe8')" show-overflow-tooltip
          label-class-name="ellipsis-header" />
        <el-table-column align="center" prop="age" :label="$t('patient.huanzhe9')" show-overflow-tooltip>
          <template slot-scope="props">{{ props.row.age >= 0 ? props.row.age : '-' }}</template>
        </el-table-column>
        <el-table-column align="center" prop="creatorName" :label="$t('patient.huanzhe10')" show-overflow-tooltip>
          <template slot-scope="props">{{ props.row.creatorName }}</template>
        </el-table-column>
        <el-table-column align="center" prop="createDate" :label="$t('patient.huanzhe11')" width="160" />
        <el-table-column align="center" prop="lastDoctorTime" :label="$t('patient.huanzhe12')" width="160" />
        <el-table-column align="center" prop="updaterName" :label="$t('patient.huanzhe13')">
          <template slot-scope="props">{{ props.row.updaterName }}</template>
        </el-table-column>
        <el-table-column align="center" prop="updateDate" :label="$t('patient.huanzhe14')" width="160" />
        <el-table-column align="center" :label="$t('patient.huanzhe15')" min-width="150">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <!-- <el-button @click="patientDetailHandle" type="text"
            :size="tableButtonSize">{{ $t('patient.huanzhe16') }}</el-button>-->
            <el-button v-if="(user_owner != 1 && user_roleId == 2) || user_owner == 1" type="text"
              :size="tableButtonSize" @click="deleteItem(scope.row.id)">{{ $t('add.add53') }}</el-button>
            <el-button type="text" :size="tableButtonSize" @click="patientEditHandle(scope.row)">
              {{ $t('patient.huanzhe17') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 16px 0; float: right">
        <el-pagination background :current-page.sync="form.page" :page-sizes="[10, 20, 50, 100]" :page-size="form.limit"
          :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <!-- 患者添加 -->
    <PatientAdd ref="PatientAdd" @getPatientList="getPatientList" />
  </div>
</template>

<script>
import PatientAdd from './add.vue'; //
import { isMobile, isEmail } from '@/utils/validate';
import mixinViewModule from '@/mixins/view-module';

export default {
  name: 'BLZMasterIndex',
  components: {
    PatientAdd,
  },
  mixins: [mixinViewModule],
  data() {
    return {
      // mixinViewModuleOptions: {
      //     getDataListURL: '/patient/page',
      //     getDataListIsPage: true,
      //     // exportURL: '/client/client/export',
      //     // deleteURL: '/client/client',
      //     deleteIsBatch: true,
      // },
      form: {
        // input: "",//name姓名 contactWay手机号或邮箱
        name: '', // 姓名 name姓名 contactWay手机号或邮箱
        contactWay: '', // 联系方式
        age: '', // 年龄
        creator: '', // 创建人
        createDate: '', // 创建时间
        lastDoctorTime: '', // 最近就诊时间
        updater: '', // 跟新人
        updateDate: '', // 跟新时间
        page: 1, // 默认第1页
        limit: 10, // 每页条数
        startTime: '', // 开始时间
        endTime: '', // 结束时间
      },
      tableData: [],
      total: 0, // 总条数
      user_owner: '',
      user_roleId: '',
      user_organizedType: '',
      dateTime: [],
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t('add.add155'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add156'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add157'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 120);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add158'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },

  created() {
    this.user_owner = localStorage.getItem('user_owner'); // 1为所有者
    this.user_roleId = window.localStorage.getItem('user_roleId');
    this.user_organizedType = localStorage.getItem('user_organizedType');
    this.getPatientList();
  },
  mounted() {
    this.$clacTableHeight();
  },
  methods: {
    // 重置
    resetClick() {
      this.form = {
        // input: "",//name姓名 contactWay手机号或邮箱
        name: '', // 姓名 name姓名 contactWay手机号或邮箱
        contactWay: '', // 联系方式
        age: '', // 年龄
        creator: '', // 创建人
        createDate: '', // 创建时间
        lastDoctorTime: '', // 最近就诊时间
        updater: '', // 跟新人
        updateDate: '', // 跟新时间
        page: 1, // 默认第1页
        limit: 10, // 每页条数
        startTime: '', // 开始时间
        endTime: '', // 结束时间
      };
      this.total = 0;
      this.tableData = [];
      this.dateTime = [];
      this.getPatientList();
    },
    // 拿表单数据
    getPatientList() {
      if (this.dateTime && this.dateTime.length > 0) {
        this.form.startTime = this.dateTime[0];
        this.form.endTime = this.dateTime[1];
      } else {
        this.form.startTime = '';
        this.form.endTime = '';
      }
      let param = {
        page: this.form.page,
        limit: this.form.limit,
        name: this.form.name,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        timeZone: this.$timeZone,
        contactWay: this.form.contactWay,
      };
      this.$http
        .get('/patient/page', {
          params: param,
        })
        .then(({ data: res }) => {
          console.log('res--->', res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.total = res.data.total;
            res.data.list.forEach((item) => {
              if (item.caseBeforeSelect) {
                item.caseBeforeSelect = JSON.parse(item.caseBeforeSelect);
              }
              if (item.mouthHabitSelect) {
                item.mouthHabitSelect = JSON.parse(item.mouthHabitSelect);
              }
            });
            this.tableData = res.data.list;

            if (this.tableData.length <= 0 && this.form.page > 1) {
              this.form.page -= 1;
              this.getPatientList();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // tab切换
    handleClick() { },
    // 订单模板新建
    addHandle() {
      if (this.activeName == 'first') {
        // 订单模板新建
        this.$refs.OrderTemplate.dialogShow = true;
      } else {
        // 设备新建
        this.$refs.EquipmentAdd.dialogShow = true;
      }
    },
    // 设备编辑
    equipmentEditHandle() {
      this.$refs.EquipmentEdit.dialogShow = true;
    },
    // 患者详情
    patientDetailHandle() {
      this.$router.push('/patient/detail');
    },
    // 患者编辑
    patientEditHandle(val) {
      this.$refs.PatientAdd.title = this.$t('patient.huanzhe18');
      this.$refs.PatientAdd.form = val;
      // this.$refs.PatientAdd.form=  表单数据
      this.$refs.PatientAdd.dialogShow = true;
    },
    // 患者添加
    addPatientHandle() {
      this.$refs.PatientAdd.title = this.$t('patient.huanzhe19');
      this.$refs.PatientAdd.form ==
      {
        name: '', // 姓名
        age: '', // 年龄
        sex: '', // 性别
        contactWay: '', // 邮箱或手机号
        caseBeforeRemark: '', // 既往史
        caseBeforeSelect: [], // 既往史选项
        caseAllergy: '', // 过敏史
        mouthHabitRemark: '', // 口腔习惯
        mouthHabitSelect: [], // 口腔习惯选项
        remark: '', // 备注
      };
      this.$refs.PatientAdd.dialogShow = true;
    },
    deleteItem(id) {
      this.$confirm(this.$t('add.add176'), this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add142'),
        cancelButtonText: this.$t('add.add143'),
        type: 'warning',
      })
        .then(() => {
          this.$http
            .delete(`/patient?id=${id}`)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add66'));
                this.getPatientList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    handleSizeChange(val) {
      this.form.limit = val;
      this.getPatientList();
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getPatientList();
    },
  },
};
</script>

<style lang="scss" scoped>
.top_nav {
  // height: 77px;
  box-sizing: border-box;

  .top_nav_inner {
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
  }
}

.equipmet_inner {
  margin-top: 20px;
}


.patient {
  ::v-deep .el-card__body {
    overflow: hidden;
  }
}
</style>
